<template>
    <!-- 项目容器 start-->
    <div class="app">
        <h1 class="aa">app.vue的H1标签</h1>
        <span>span标签</span>
        <h2>app.vue的H2标签
            <span>span标签</span>
        </h2>
        <StyleCss ></StyleCss>
        <h1>app.vue的H1标签</h1>
    </div>
    <!-- 项目容器 end-->
</template>
<script>
import StyleCss from "./domes/StyleCss"

export default {
    components:{
        StyleCss
    },
};
</script>
<style>
    /* 单文件组件中，默认style为全局样式 */
    h1{
        color: red;
    }
</style>
<style scoped>
    /* 
        在当前位置定义的样式为当前组件独享样式 
        组件局部样式
        -> scoped 会组件样式解析式完成两件事情
            1、修改当前范围内的所有样式选择器
               在定义的选择器后以属性选择器指定一个随机值（一个组件只有一个随机值）
            2、为当前样式所在组件所有标签增加 随机值属性
    */
    h1{
        background-color: #dedede;
    } 
    /* ==> h1[随机值]{ …… } */
    .aa{
        font-size: 12px;

    }
</style>
<style scoped lang="less">
    // @import "./css/var.less";
    /* 
        标签定义的 lang 样式目的是为了解释当前样式区为何种样式语法
        组件在解析时，是否需要经过转换处理
        lang= " css|less|sass|scss|stylus "
        lang默认取值为传统的 css
    */
    @de:#dedede;
    h2{
        color:@pink ;
        span{
            background-color: @de;
        }
    }
</style>